<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>诗词详情 - 诗词学习应用</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- Tailwind配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#8B4513',
            secondary: '#D2B48C',
            accent: '#A52A2A',
            light: '#F5F5DC',
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
            serif: ['Noto Serif SC', 'serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
        .content-auto {
            content-visibility: auto;
        }
        .btn-primary {
            background-color: #8B4513;
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 0.375rem;
            transition: all 300ms ease;
            &:hover {
                background-color: rgba(139, 69, 19, 0.8);
            }
            &:focus {
                outline: none;
                box-shadow: 0 0 0 2px rgba(139, 69, 19, 0.5);
            }
        }
        .btn-secondary {
            background-color: #D2B48C;
            color: #8B4513;
            padding: 0.5rem 1rem;
            border-radius: 0.375rem;
            transition: all 300ms ease;
            &:hover {
                background-color: rgba(210, 180, 140, 0.8);
            }
            &:focus {
                outline: none;
                box-shadow: 0 0 0 2px rgba(210, 180, 140, 0.5);
            }
        }
        .nav-item {
            color: white;
            transition: color 300ms ease;
            &:hover {
                color: #D2B48C;
            }
        }
        .poem-title {
            font-size: 1.5rem;
            @media (min-width: 768px) {
                font-size: 1.875rem;
            }
            font-weight: bold;
            color: #8B4513;
            margin-bottom: 0.5rem;
        }
        .poem-meta {
            color: #6B7280;
            margin-bottom: 1.5rem;
        }
        .poem-content {
            font-size: 1.125rem;
            @media (min-width: 768px) {
                font-size: 1.25rem;
            }
            line-height: 1.625;
            margin-bottom: 2rem;
            font-family: 'Noto Serif SC', serif;
        }
        .tab-btn {
            padding: 0.5rem 1rem;
            color: #4B5563;
            border-bottom: 2px solid transparent;
            transition: color 300ms ease;
            &:hover {
                color: #8B4513;
            }
        }
        .tab-btn.active {
            color: #8B4513;
            border-color: #8B4513;
            font-weight: 500;
        }
        .tab-content {
            display: none;
        }
        .tab-content.active {
            display: block;
        }
    }
  </style>
</head>
<body class="bg-light min-h-screen flex flex-col">
  <!-- 导航栏 -->
  <nav class="bg-primary text-white shadow-lg sticky top-0 z-50">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
      <div class="flex items-center space-x-2">
        <i class="fa fa-book text-2xl"></i>
        <h1 class="text-xl md:text-2xl font-bold">拾光诗栈</h1>
      </div>
      
      <div class="hidden md:flex space-x-8">
        <a href="index.html" class="nav-item flex items-center"><i class="fa fa-home mr-2"></i>首页</a>
        <a href="browse.html" class="nav-item flex items-center"><i class="fa fa-list mr-2"></i>诗词库</a>
        <a href="plan.html" class="nav-item flex items-center"><i class="fa fa-calendar mr-2"></i>学习计划</a>
        <a href="favorite.html" class="nav-item flex items-center"><i class="fa fa-heart mr-2"></i>我的收藏</a>
        <a href="login.html" class="nav-item flex items-center"><i class="fa fa-user mr-2"></i>登录</a>
      </div>
      
      <div class="flex items-center space-x-4">
        <div class="relative hidden md:block">
          <input type="text" id="search-input" placeholder="搜索诗词..." 
                 class="py-1 px-3 rounded-full focus:outline-none text-gray-800 w-40 lg:w-60">
          <button id="search-btn" class="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500">
            <i class="fa fa-search"></i>
          </button>
        </div>
        <button id="mobile-menu-btn" class="md:hidden text-white focus:outline-none">
          <i class="fa fa-bars text-xl"></i>
        </button>
      </div>
    </div>
    
    <!-- 移动端菜单 -->
    <div id="mobile-menu" class="md:hidden bg-primary/95 backdrop-blur-md hidden animate-fadeIn">
      <div class="container mx-auto px-4 py-3 flex flex-col space-y-4">
        <div class="relative">
          <input type="text" placeholder="搜索诗词..." 
                 class="w-full py-2 px-4 rounded-full focus:outline-none text-gray-800">
          <button class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500">
            <i class="fa fa-search"></i>
          </button>
        </div>
        <a href="index.html" class="nav-item py-2 border-b border-gray-700 flex items-center">
          <i class="fa fa-home mr-2 w-5"></i>首页
        </a>
        <a href="browse.html" class="nav-item py-2 border-b border-gray-700 flex items-center">
          <i class="fa fa-list mr-2 w-5"></i>诗词库
        </a>
        <a href="plan.html" class="nav-item py-2 border-b border-gray-700 flex items-center">
          <i class="fa fa-calendar mr-2 w-5"></i>学习计划
        </a>
        <a href="favorite.html" class="nav-item py-2 flex items-center">
          <i class="fa fa-heart mr-2 w-5"></i>我的收藏
        </a>
        <a href="login.html" class="nav-item py-2 flex items-center">
          <i class="fa fa-info-circle mr-2 w-5"></i>登录
        </a>
      </div>
    </div>
  </nav>

  <!-- 主要内容 -->
  <main class="flex-grow container mx-auto px-4 py-8">
    <!-- 返回按钮 -->
    <div class="mb-6">
      <a href="browse.html" class="inline-flex items-center text-primary hover:underline">
        <i class="fa fa-arrow-left mr-2"></i>返回诗词库
      </a>
    </div>
    
    <!-- 诗词详情 -->
    <section class="bg-white rounded-lg shadow-md p-6 md:p-8 mb-8">
      <div class="text-center mb-6">
        <h2 class="poem-title">静夜思</h2>
        <p class="poem-meta">唐·李白</p>
      </div>
      
      <div class="flex justify-center mb-8">
        <div class="bg-light rounded-lg p-6 max-w-md text-center">
          <p class="poem-content">
            床前明月光，疑是地上霜。<br>
            举头望明月，低头思故乡。
          </p>
        </div>
      </div>
      
      <!-- 诗词标签 -->
      <div class="flex flex-wrap gap-2 justify-center mb-8">
        <span class="bg-secondary/30 text-primary px-3 py-1 rounded-full text-sm">思乡</span>
        <span class="bg-secondary/30 text-primary px-3 py-1 rounded-full text-sm">唐诗</span>
        <span class="bg-secondary/30 text-primary px-3 py-1 rounded-full text-sm">五言绝句</span>
      </div>
      
      <!-- 操作按钮 -->
      <div class="flex flex-wrap justify-center gap-4 mb-8">
        <button id="favorite-btn" class="btn-primary flex items-center">
          <i class="fa fa-bookmark-o mr-2"></i>收藏
        </button>
        <!-- <button class="btn-secondary flex items-center">
          <i class="fa fa-plus mr-2"></i>加入学习计划
        </button> -->
        <button class="btn-secondary flex items-center">
          <i class="fa fa-share-alt mr-2"></i>分享
        </button>
      </div>
      
      <!-- 诗词赏析选项卡 -->
      <div class="border-b border-gray-200 mb-6">
        <div class="flex overflow-x-auto space-x-1 md:space-x-4">
          <button id="tab-1" class="tab-btn active whitespace-nowrap">诗词注释</button>
          <button id="tab-2" class="tab-btn whitespace-nowrap">诗词赏析</button>
          <button id="tab-3" class="tab-btn whitespace-nowrap">创作背景</button>
          <button id="tab-4" class="tab-btn whitespace-nowrap">名家点评</button>
        </div>
      </div>
      
      <!-- 选项卡内容 -->
      <div class="tab-content active" id="tab-content-1">
        <h3 class="text-xl font-bold text-primary mb-4">诗词注释</h3>
        <p class="text-gray-700 mb-4">
          ⑴静夜思：安静的夜晚产生的思绪。
        </p>
        <p class="text-gray-700 mb-4">
          ⑵床：今传五种说法。
          一指井台。已经有学者撰文考证过。中国教育家协会理事程实将考证结果写成论文发表在刊物上，还和好友创作了《诗意图》。
          二指井栏。从考古发现来看，中国最早的水井是木结构水井。古代井栏有数米高，成方框形围住井口，防止人跌入井内，这方框形既像四堵墙，又像古代的床。因此古代井栏又叫银床，说明井和床有关系，其关系的发生则是由于两者在形状上的相似和功能上的类同。古代井栏专门有一个字来指称，即"韩"字。《说文》释"韩"为"井垣也"，即井墙之意。
          三"床"即"窗"的通假字。本诗中的'床'字，是争论和异议的焦点。我们可以做一下基本推理。本诗的写作背景是在一个明月夜，很可能是月圆前后，作者由看到月光，再看到明月，又引起思乡之情。
          四取本义，即坐卧的器具，《诗经·小雅·斯干》有"载寐之牀"，《易·剥牀·王犊注》亦有"在下而安者也。"之说，讲得即是卧具。
          五马未都等认为，床应解释为胡床。胡床，亦称"交床"、"交椅"、"绳床"。古时一种可以折叠的轻便坐具，马扎功能类似小板凳，但人所坐的面非木板，而是可卷折的布或类似物，两边腿可合起来。现代人常为古代文献中或诗词中的"胡床"或"床"所误。至迟在唐时，"床"仍然是"胡床"（即马扎，一种坐具）。
        </p>
        <p class="text-gray-700 mb-4">
          ⑶疑：好像。
        </p>
        <p class="text-gray-700">
          ⑷举头：抬头。
        </p>
      </div>
      
      <div class="tab-content" id="tab-content-2">
        <h3 class="text-xl font-bold text-primary mb-4">诗词赏析</h3>
        <p class="text-gray-700 mb-4">
          这首诗描写了秋日夜晚，诗人于屋内抬头望月的所感。诗中运用比喻、衬托等手法，表达客居思乡之情，语言清新朴素而韵味含蓄无穷，历来广为传诵。
        </p>
        <p class="text-gray-700 mb-4">
          "床前明月光，疑是地上霜。"诗人在异乡特定环境中一刹那间所产生的错觉。一个独处他乡的人，白天奔波忙碌，倒还能冲淡离愁，然而一到夜深人静的时候，心头就难免泛起阵阵思念故乡的波澜。何况是在月明之夜，何况是月色如霜的秋夜。"疑是地上霜"中的"疑"字，生动地表达了诗人睡梦初醒，迷离恍惚中将照射在床前的清冷月光误作铺在地面的浓霜。而"霜"字用得更妙，既形容了月光的皎洁，又表达了季节的寒冷，还烘托出诗人飘泊他乡的孤寂凄凉之情。
        </p>
        <p class="text-gray-700 mb-4">
          "举头望明月，低头思故乡。"诗人从错觉中慢慢醒悟过来，原来是明亮的月光洒在床前的窗户纸上。他抬起头来，看那天窗外空中的一轮明月，不由得低头沉思，想起远方的家乡。"举头"这一动作从侧面反映出诗人的辗转反侧，无法入眠。他怅然于明月依旧，而家乡的亲人却远在千里之外。诗人通过"举头"、"低头"这两个看似平常的动作，将思乡之情表现得淋漓尽致。
        </p>
        <p class="text-gray-700">
          这首诗的艺术特色在于它的简练而含蓄。全诗仅二十个字，却意味深长，耐人寻味。诗人没有直接抒发自己的思乡之情，而是通过描写客观景物，将自己的情感融入其中，让读者自己去体会和感受。这种表现手法，使诗歌更具感染力和艺术魅力。
        </p>
      </div>
      
      <div class="tab-content" id="tab-content-3">
        <h3 class="text-xl font-bold text-primary mb-4">创作背景</h3>
        <p class="text-gray-700 mb-4">
          李白的《静夜思》创作于唐玄宗开元十四年（726年）九月十五日的扬州旅舍，时李白26岁。同时同地所作的还有一首《秋夕旅怀》。在一个月明星稀的夜晚，诗人抬望天空一轮皓月，思乡之情油然而生，写下了这首传诵千古、中外皆知的名诗《静夜思》。
        </p>
        <p class="text-gray-700">
          也有说法，这首诗是李白青年时期出蜀漫游时所作。他离开故乡，踏上远游的征途，心中充满了对未来的憧憬和对故乡的思念。在一个寂静的夜晚，他独自躺在床上，看到月光洒在床前，不禁想起了远方的家乡和亲人，于是写下了这首感人至深的《静夜思》。
        </p>
      </div>
      
      <div class="tab-content" id="tab-content-4">
        <h3 class="text-xl font-bold text-primary mb-4">名家点评</h3>
        <p class="text-gray-700 mb-4">
          宋·胡仔《苕溪渔隐丛话后集》："《苕溪渔隐丛话》云：《明皇杂录》云：'李太白初自蜀至京师，舍于逆旅。贺监知章闻其名，首访之。既奇其姿，复请所为文，出《蜀道难》以示之。读未竟，称叹者数四，号为谪仙，解金龟换酒，与倾尽醉。期不间日，由是称誉光赫。'"
        </p>
        <p class="text-gray-700 mb-4">
          宋·刘辰翁《李太白诗醇》："五字之妙，妙在不说尽。"
        </p>
        <p class="text-gray-700 mb-4">
          明·桂天祥《批点唐诗正声》："亦是直述，然其中有人，言外有神。"
        </p>
        <p class="text-gray-700 mb-4">
          明·钟惺、谭元春《唐诗归》："看尽古今人说乡思，再看此作，此老炉锤之妙，更无前无后。"
        </p>
        <p class="text-gray-700">
          清·沈德潜《唐诗别裁》："旅中情思，虽说明却不说尽。"
        </p>
      </div>
    </section>
    
    <!-- 相关推荐 -->
    <section>
      <h3 class="text-2xl font-bold text-primary mb-6">相关推荐</h3>
      
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white rounded-lg shadow-md p-4 transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
          <h4 class="text-lg font-bold text-primary mb-2">望庐山瀑布</h4>
          <p class="text-sm text-gray-500 mb-3">唐·李白</p>
          <p class="text-gray-700 mb-3 line-clamp-2 font-serif">
            日照香炉生紫烟，遥看瀑布挂前川。<br>
            飞流直下三千尺，疑是银河落九天。
          </p>
          <a href="detail.html?id=4" class="text-accent hover:underline flex items-center">
            阅读全文 <i class="fa fa-angle-right ml-1"></i>
          </a>
        </div>
        
        <div class="bg-white rounded-lg shadow-md p-4 transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
          <h4 class="text-lg font-bold text-primary mb-2">月下独酌四首·其一</h4>
          <p class="text-sm text-gray-500 mb-3">唐·李白</p>
          <p class="text-gray-700 mb-3 line-clamp-2 font-serif">
            花间一壶酒，独酌无相亲。<br>
            举杯邀明月，对影成三人。
          </p>
          <a href="#" class="text-accent hover:underline flex items-center">
            阅读全文 <i class="fa fa-angle-right ml-1"></i>
          </a>
        </div>
        
        <div class="bg-white rounded-lg shadow-md p-4 transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
          <h4 class="text-lg font-bold text-primary mb-2">春夜洛城闻笛</h4>
          <p class="text-sm text-gray-500 mb-3">唐·李白</p>
          <p class="text-gray-700 mb-3 line-clamp-2 font-serif">
            谁家玉笛暗飞声，散入春风满洛城。<br>
            此夜曲中闻折柳，何人不起故园情。
          </p>
          <a href="#" class="text-accent hover:underline flex items-center">
            阅读全文 <i class="fa fa-angle-right ml-1"></i>
          </a>
        </div>
      </div>
    </section>
  </main>

  <!-- 页脚 -->
  <footer class="bg-primary text-white py-8">
    <div class="container mx-auto px-4">
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <div>
          <h3 class="text-xl font-bold mb-4">诗词学习</h3>
          <p class="text-gray-300">探索中国古典诗词的魅力，感受千年文化的积淀，提升文学素养。</p>
          <div class="flex space-x-4 mt-4">
            <a href="#" class="text-white hover:text-secondary transition-colors duration-300">
              <i class="fa fa-weibo text-xl"></i>
            </a>
            <a href="#" class="text-white hover:text-secondary transition-colors duration-300">
              <i class="fa fa-wechat text-xl"></i>
            </a>
            <a href="#" class="text-white hover:text-secondary transition-colors duration-300">
              <i class="fa fa-github text-xl"></i>
            </a>
          </div>
        </div>
        
        <div>
          <h3 class="text-xl font-bold mb-4">快速链接</h3>
          <ul class="space-y-2">
            <li><a href="index.html" class="text-gray-300 hover:text-white transition-colors duration-300">首页</a></li>
            <li><a href="browse.html" class="text-gray-300 hover:text-white transition-colors duration-300">诗词库</a></li>
            <li><a href="plan.html" class="text-gray-300 hover:text-white transition-colors duration-300">学习计划</a></li>
            <li><a href="favorite.html" class="text-gray-300 hover:text-white transition-colors duration-300">我的收藏</a></li>
            <li><a href="login.html" class="text-gray-300 hover:text-white transition-colors duration-300">登录</a></li>
          </ul>
        </div>
        
        <div>
          <h3 class="text-xl font-bold mb-4">联系我们</h3>
          <ul class="space-y-2">
            <li class="flex items-start">
              <i class="fa fa-envelope-o mt-1 mr-2"></i>
              <span class="text-gray-300">contact@shicixuexi.com</span>
            </li>
            <li class="flex items-start">
              <i class="fa fa-phone mt-1 mr-2"></i>
              <span class="text-gray-300">400-123-4567</span>
            </li>
            <li class="flex items-start">
              <i class="fa fa-map-marker mt-1 mr-2"></i>
              <span class="text-gray-300">北京市海淀区中关村南大街5号</span>
            </li>
          </ul>
        </div>
      </div>
      
      <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
        <p>&copy; 2025 诗词学习平台. 保留所有权利.</p>
      </div>
    </div>
  </footer>

  <!-- JavaScript -->
  <script>
    // 移动端菜单切换
    document.getElementById('mobile-menu-btn').addEventListener('click', function() {
      const mobileMenu = document.getElementById('mobile-menu');
      mobileMenu.classList.toggle('hidden');
    });
    
    // 搜索功能
    document.getElementById('search-btn').addEventListener('click', function() {
      const searchTerm = document.getElementById('search-input').value.trim();
      if (searchTerm) {
        // 实际应用中这里应该跳转到搜索结果页或执行搜索逻辑
        alert(`搜索"${searchTerm}"的结果将在这里显示`);
      }
    });
    
    // 选项卡切换
    const tabBtns = document.querySelectorAll('.tab-btn');
    const tabContents = document.querySelectorAll('.tab-content');
    
    tabBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        // 移除所有活动状态
        tabBtns.forEach(b => b.classList.remove('active'));
        tabContents.forEach(c => c.classList.remove('active'));
        
        // 添加当前活动状态
        btn.classList.add('active');
        const tabId = btn.id.split('-')[1];
        document.getElementById(`tab-content-${tabId}`).classList.add('active');
      });
    });
// 获取 URL 参数
  const urlParams = new URLSearchParams(window.location.search);
  const poemId = urlParams.get('id');
    // 假设诗词数据存储在一个对象中
    const poems = {
        '1': {
            id: '1',
            title: '静夜思',
            author: '唐·李白',
            content: '床前明月光，疑是地上霜。<br>举头望明月，低头思故乡。',
            tags: ['思乡', '唐诗', '五言绝句'],
            annotation: `
                ⑴静夜思：安静的夜晚产生的思绪。
                ⑵床：今传五种说法。一指井台。已经有学者撰文考证过。中国教育家协会理事程实将考证结果写成论文发表在刊物上，还和好友创作了《诗意图》。二指井栏。从考古发现来看，中国最早的水井是木结构水井。古代井栏有数米高，成方框形围住井口，防止人跌入井内，这方框形既像四堵墙，又像古代的床。因此古代井栏又叫银床，说明井和床有关系，其关系的发生则是由于两者在形状上的相似和功能上的类同。古代井栏专门有一个字来指称，即"韩"字。《说文》释"韩"为"井垣也"，即井墙之意。三"床"即"窗"的通假字。本诗中的'床'字，是争论和异议的焦点。我们可以做一下基本推理。本诗的写作背景是在一个明月夜，很可能是月圆前后，作者由看到月光，再看到明月，又引起思乡之情。四取本义，即坐卧的器具，《诗经·小雅·斯干》有"载寐之牀"，《易·剥牀·王犊注》亦有"在下而安者也。"之说，讲得即是卧具。五马未都等认为，床应解释为胡床。胡床，亦称"交床"、"交椅"、"绳床"。古时一种可以折叠的轻便坐具，马扎功能类似小板凳，但人所坐的面非木板，而是可卷折的布或类似物，两边腿可合起来。现代人常为古代文献中或诗词中的"胡床"或"床"所误。至迟在唐时，"床"仍然是"胡床"（即马扎，一种坐具）。
                ⑶疑：好像。
                ⑷举头：抬头。
            `,
            appreciation: `
                这首诗描写了秋日夜晚，诗人于屋内抬头望月的所感。诗中运用比喻、衬托等手法，表达客居思乡之情，语言清新朴素而韵味含蓄无穷，历来广为传诵。
                "床前明月光，疑是地上霜。"诗人在异乡特定环境中一刹那间所产生的错觉。一个独处他乡的人，白天奔波忙碌，倒还能冲淡离愁，然而一到夜深人静的时候，心头就难免泛起阵阵思念故乡的波澜。何况是在月明之夜，何况是月色如霜的秋夜。"疑是地上霜"中的"疑"字，生动地表达了诗人睡梦初醒，迷离恍惚中将照射在床前的清冷月光误作铺在地面的浓霜。而"霜"字用得更妙，既形容了月光的皎洁，又表达了季节的寒冷，还烘托出诗人飘泊他乡的孤寂凄凉之情。
                "举头望明月，低头思故乡。"诗人从错觉中慢慢醒悟过来，原来是明亮的月光洒在床前的窗户纸上。他抬起头来，看那天窗外空中的一轮明月，不由得低头沉思，想起远方的家乡。"举头"这一动作从侧面反映出诗人的辗转反侧，无法入眠。他怅然于明月依旧，而家乡的亲人却远在千里之外。诗人通过"举头"、"低头"这两个看似平常的动作，将思乡之情表现得淋漓尽致。
                这首诗的艺术特色在于它的简练而含蓄。全诗仅二十个字，却意味深长，耐人寻味。诗人没有直接抒发自己的思乡之情，而是通过描写客观景物，将自己的情感融入其中，让读者自己去体会和感受。这种表现手法，使诗歌更具感染力和艺术魅力。
            `,
            background: `
                李白的《静夜思》创作于唐玄宗开元十四年（726年）九月十五日的扬州旅舍，时李白26岁。同时同地所作的还有一首《秋夕旅怀》。在一个月明星稀的夜晚，诗人抬望天空一轮皓月，思乡之情油然而生，写下了这首传诵千古、中外皆知的名诗《静夜思》。
                也有说法，这首诗是李白青年时期出蜀漫游时所作。他离开故乡，踏上远游的征途，心中充满了对未来的憧憬和对故乡的思念。在一个寂静的夜晚，他独自躺在床上，看到月光洒在床前，不禁想起了远方的家乡和亲人，于是写下了这首感人至深的《静夜思》。
            `,
            comments: `
                宋·胡仔《苕溪渔隐丛话后集》："《苕溪渔隐丛话》云：《明皇杂录》云：'李太白初自蜀至京师，舍于逆旅。贺监知章闻其名，首访之。既奇其姿，复请所为文，出《蜀道难》以示之。读未竟，称叹者数四，号为谪仙，解金龟换酒，与倾尽醉。期不间日，由是称誉光赫。'"
                宋·刘辰翁《李太白诗醇》："五字之妙，妙在不说尽。"
                明·桂天祥《批点唐诗正声》："亦是直述，然其中有人，言外有神。"
                明·钟惺、谭元春《唐诗归》："看尽古今人说乡思，再看此作，此老炉锤之妙，更无前无后。"
                清·沈德潜《唐诗别裁》："旅中情思，虽说明却不说尽。"
            `
        },
        '2': {
            id: '2',
            title: '春望',
            author: '唐·杜甫',
            content: '国破山河在，城春草木深。<br>感时花溅泪，恨别鸟惊心。<br>烽火连三月，家书抵万金。<br>白头搔更短，浑欲不胜簪。',
            tags: ['战争', '忧国忧民', '七言律诗'],
            annotation: `
                ⑴春望：春天登高远望时的所见所感。
                ⑵国：指长安（今陕西西安）。唐肃宗至德年间，安史之乱叛军占据长安，城池残破。
                ⑶感时：为时事而感伤。时，指安史之乱引发的动荡时局。
                ⑷恨别：怅恨离别。杜甫因战乱与家人离散，久无音讯。
                ⑸烽火：古代边防军事通讯的警报信号，此处借指战争。三月：极言时间之长，非确指。
            `,
            appreciation: `
                这首诗通过描写春日长安破败萧条的景象，抒发了诗人忧国伤时、念家悲己的深沉情感。全诗情景交融，对仗工整，用词凝练，体现了杜甫“诗中有史”的现实主义风格。
                "国破山河在，城春草木深。"首联以“破”与“在”、“深”与“春”的强烈对比，展现战乱后长安城的荒芜：国家破碎，唯有山河依旧；春日来临，城池却满是杂草丛生。一个“深”字，既写出草木疯长的荒凉，又暗含诗人内心的悲痛。
                "感时花溅泪，恨别鸟惊心。"颔联移情于物，以花鸟拟人：因感伤时局，见花开而落泪；因怅恨离别，闻鸟鸣而惊心。表面写花鸟，实则借自然景物表达诗人对国家命运的担忧和对亲人离散的哀愁。
                "烽火连三月，家书抵万金。"颈联直抒胸臆，写战火持续已久，一封家书胜过万两黄金。“抵万金”用夸张手法，突出战乱中亲情的珍贵与音讯隔绝的痛苦，引发读者强烈共鸣。
                "白头搔更短，浑欲不胜簪。"尾联以细节描写收束，诗人因忧思愁苦，白发越搔越短，几乎连簪子都插不住。“搔”字刻画焦虑之态，“短”“不胜簪”则层层递进，将诗人衰老憔悴的形象与忧国思家的深情推向极致。
            `,
            background: `
                《春望》作于唐肃宗至德二年（757年）三月，此时安史之乱已持续数年。杜甫在投奔肃宗途中，被叛军俘获，押至长安。目睹都城沦陷后的破败景象，又与家人音信断绝，诗人感慨万千，遂写下此诗。
                安史之乱是唐王朝由盛转衰的转折点，战争导致民生凋敝、社会动荡。杜甫作为心系国家的诗人，将个人命运与国家命运紧密结合，在诗中既展现了战乱的残酷，又表达了对和平的渴望和对亲人的思念。
            `,
            comments: `
                唐·孟棨《本事诗》："杜（甫）逢禄山之难，流离陇蜀，毕陈于诗，推见至隐，殆无遗事，故当时号为'诗史'。"（虽非直接评《春望》，却概括其现实主义风格）
                宋·司马光《温公续诗话》："古人为诗，贵于意在言外，使人思而得之……如杜甫《春望》诗：'国破山河在……'皆意在言外，余味无穷。"
                明·胡震亨《唐音癸签》："杜诗正而能变，变而能化……《春望》诸篇，酸苦惨澹中，具沉雄博丽之气。"
                清·仇兆鳌《杜诗详注》："此诗首联破题，颔联触景，颈联感时，尾联伤老，层次井然，而悲痛之情，溢于言表。"
                现代·闻一多《唐诗杂论》："杜甫是中华民族的脊梁，他的诗是苦难时代的缩影。《春望》以精炼的语言写尽人间疮痍，堪称'诗中之史'。"
            `
        },
        '3': {
            id: '3',
            title: '相见欢',
            author: '五代·李煜',
            content: '无言独上西楼，月如钩。<br>寂寞梧桐深院锁清秋。<br>剪不断，理还乱，是离愁。<br>别是一般滋味在心头。',
            tags: ['离愁', '五代词', '小令'],
            annotation: `
                ⑴相见欢：原为唐教坊曲名，后用作词牌名。又名“乌夜啼”“秋夜月”“上西楼”等。此调有不同诸体，李煜这首词为三十六字体，上片平韵，下片两仄韵两平韵 。
                ⑵无言：默默无言，并非无话可说，而是无人可倾诉。这二字生动地描绘出词人愁苦的神态 。
                ⑶独：独自，体现出词人孤身一人的孤独状态 。“独上西楼”勾勒出作者独自登楼的落寞身影。
                ⑷月如钩：一弯残月挂在天空，形象地写出了月亮的形状。这一景象不仅点明了时间，也烘托出一种孤寂、凄凉的氛围 。
                ⑸寂寞：既是写梧桐树在深院中的孤寂，更是词人内心孤寂情感的外化。在这深秋时节，梧桐叶稀稀疏疏，在秋风中瑟瑟发抖，更添几分寂寥。
                ⑹深院：幽深的庭院，暗示词人所处环境的封闭与压抑 。
                ⑺锁清秋：整个深院仿佛被深秋的凄凉景色紧紧锁住。这里的“锁”字，既写出了秋意的浓重，又象征着词人内心的愁苦被禁锢，无法排解 。
                ⑻剪不断，理还乱，是离愁：用丝缕来比喻离愁，将抽象的情感具象化。离愁就像那千丝万缕，怎么剪都剪不断，越想整理反而越发杂乱。这里的“离愁”，若词作于李煜归宋后，当指他离乡去国、沦为阶下囚的锥心之痛 。
                ⑼别是一般：另有一种独特的。这“别是一般滋味”，是一种难以用言语表述清楚的复杂情感，它根植于词人内心深处，是其经历亡国之痛、人生巨变后的独特感受，包含着悔恨、思念、痛苦、无奈等多种情绪 。
            `,
            appreciation: `
                《相见欢·无言独上西楼》是李煜的经典词作，全词以简洁凝练的语言、生动形象的意象，深刻地抒发了词人内心深处复杂而深沉的愁苦之情，具有极高的艺术价值。
                开篇“无言独上西楼”，短短六个字，便将词人的愁苦神态与孤独身影刻画得淋漓尽致。“无言”并非真的无话可说，而是历经沧桑、满心愁苦却无人倾诉的无奈与悲哀；“独上”则进一步强化了其孤独感，一个人缓缓登上西楼，那种形单影只的落寞跃然纸上，为全词奠定了凄凉悲伤的基调 。
                “月如钩，寂寞梧桐深院锁清秋”，词人将视线投向天空与庭院。如钩的残月，清冷孤寂，既暗示了时间的流逝，又烘托出一种孤寂、凄凉的氛围 。
                俯视庭院，寂寞的梧桐树在秋风中瑟瑟发抖，深院被浓重的秋意所笼罩，仿佛一切都被禁锢其中。这里的“寂寞”“锁”等词，既是对客观环境的描写，更是词人主观情感的投射，他的孤寂、愁苦、无奈，都被融入这秋景之中，达到了情景交融的艺术境界 。
                下片“剪不断，理还乱，是离愁”堪称千古名句。词人以丝缕喻离愁，生动地表现出离愁的纷繁复杂与难以排解。丝缕虽可剪断、梳理，而这离愁却越剪越乱，越理越繁，形象地传达出词人内心的纠结与痛苦。这种将抽象情感具象化的手法，使读者能够真切地感受到词人所承受的沉重精神压力 。
                结句“别是一般滋味在心头”，则将这种复杂的情感推向了高潮。“别是一般滋味”究竟是什么滋味，词人并未明说，而是留给读者无尽的想象空间。这滋味中，或许有对往昔荣华富贵的追忆与悔恨，有对故国家园的深切思念，有对自己命运无常的无奈与悲哀，多种情绪交织在一起，无法言说，只能深深埋在心底。这种含蓄的表达方式，使词作的意蕴更加深沉、悠长，具有强烈的艺术感染力，让读者在反复品味中，产生强烈的情感共鸣 。
            `,
            background: `
                李煜这首《相见欢·无言独上西楼》的创作时间难以精确考证，但从词的内容与情感基调推测，大概率作于他亡国降宋之后。公元975年，南唐被北宋所灭，李煜肉袒出降，从一国之君沦为阶下囚，被囚禁于汴京 。
                身份的巨大转变，生活环境的天翻地覆，使李煜的心境陷入了极度的痛苦与绝望之中。在这孤寂冷清的囚禁岁月里，他常常独自沉思，往昔南唐的繁华盛景与如今的凄凉处境形成了鲜明的对比。一个深秋的夜晚，李煜独自登上西楼，仰望天空那如钩的残月，俯瞰被秋意笼罩的幽深庭院，心中的愁苦、悔恨、思念等复杂情感如潮水般涌上心头，于是挥笔写下了这首千古流传的《相见欢》 。
                在汴京的囚徒生活中，李煜失去了自由，尊严扫地，时刻面临着死亡的威胁。这种种遭遇让他对人生、命运有了更为深刻的感悟，其词作风格也由此前的绮丽柔靡转变为沉郁悲怆。《相见欢》正是他后期这种心境与风格的典型代表，真实地反映了他在特定历史背景下的内心世界 。
            `,
            comments: `
                明·沈际飞在《草堂诗余续集》中评价：“七情所至，浅尝者说破，深尝者说不破。破之浅，不破之深。‘别是一般滋味在心头’句妙 。”他指出，对于情感的表达，浅薄的人往往直白地说出来，而深刻体验的人却难以言表。李煜此句正是没有将情感说破，反而更具深意，体现出其对情感把握与表达的高超技巧 。
                近代·刘永济在《词论》中提到：“纯作情语，比托情景中为难工也。此类佳者，如：李后主‘剪不断，理还乱，是离愁，别是一般滋味在心头。’”刘永济认为，纯粹以情语入词，要比借景抒情更难写好。而李煜此词，直接倾诉内心的离愁别绪，却写得如此精妙绝伦，充分展现了他在抒情方面的卓越才华 。
                清·王闿运在《湘绮楼词选》中评价：“词之妙处，亦别是一般滋味。后主之词，足当此语 。”王闿运将词的精妙之处与李煜词中“别是一般滋味”相联系，强调了李煜词独特的艺术魅力，认为其词作在情感表达和意境营造上达到了一种独特而美妙的境界 。
                王国维在《人间词话》中对李煜词有诸多赞誉：“词至李后主而眼界始大，感慨遂深，遂变伶工之词而为士大夫之词 。”虽然此评价并非针对《相见欢》这一首词，但李煜包括《相见欢》在内的众多后期词作，确实以其深沉的感慨、广阔的意境，突破了晚唐五代词多写闺阁情事的局限，提升了词的艺术境界，对后世词的发展产生了深远影响 。
                现代学者叶嘉莹也对李煜词有深入研究，她认为李煜以纯真自然的赤子之心写词，其词情感真挚，毫无矫揉造作之感。《相见欢》中，李煜将自己内心最真实的愁苦直白地呈现出来，让读者深切感受到他的痛苦与无奈，这正是其词作打动人心的重要原因 。
            `
        },
        '4': {
          id: '4',
    title: '望庐山瀑布',
    author: '唐·李白',
    content: '日照香炉生紫烟，遥看瀑布挂前川。<br>飞流直下三千尺，疑是银河落九天。',
    tags: ['山水', '唐诗', '七言绝句'],
    annotation: `
        ⑴望庐山瀑布：看庐山瀑布。庐山，在今江西九江市南，是我国著名的风景区。
        ⑵香炉：即香炉峰，在庐山西北，因形状像香炉且山上笼罩烟云而得名。紫烟：指日光透过云雾，远望如紫色的烟云。
        ⑶遥看：从远处看。挂：悬挂。前川：一作“长川”。川：河流，这里指瀑布。
        ⑷直下：笔直泻下。三千尺：形容山高，这里是夸张的说法，不是实指。
        ⑸疑：怀疑。银河：古人指银河系构成的带状星群。九天：一作“半天”。古人认为天有九重，九天是天的最高层，九重天，即天空最高处。此句极言瀑布落差之大。
    `,
    appreciation: `
        这首诗形象地描绘了庐山瀑布雄奇壮丽的景色，反映了诗人对祖国大好河山的无限热爱。
        “日照香炉生紫烟”，一个“生”字把烟云冉冉上升的景象写活了。此句为瀑布设置了雄奇的背景，也为下文直接描写瀑布渲染了气氛。
        “遥看瀑布挂前川”，“挂”字化动为静，维纱维肖地写出遥望中的瀑布。
        “飞流直下三千尺”，“飞流”表现瀑布凌空而出，喷涌飞泻。“直下”既写出岩壁的陡峭，又写出水流之急。“三千尺”极力夸张，写山的高峻。
        “疑是银河落九天”，说这“飞流直下”的瀑布，使人怀疑是银河从九天倾泻下来。一个“疑”，用得空灵活泼，若真若幻，引人遐想，增添了瀑布的神奇色彩。
        整首诗气势恢宏，语言生动形象，意境开阔，极具艺术感染力，让人仿佛身临其境，感受到了庐山瀑布的磅礴气势。
    `,
    background: `
        这首诗一般认为是唐玄宗开元十三年（725 年）前后李白出游金陵途中初游庐山时所作。当时李白正值青春年少，怀着对祖国山河的热爱和对自由生活的向往，开始了他的漫游生涯。当他来到庐山，被庐山瀑布的壮丽景色所震撼，于是挥笔写下了这首千古名篇，以表达对大自然神奇造化的赞美之情。
    `,
    comments: `
        宋·苏轼《东坡题跋·书李太白〈庐山谣〉》：“帝遣银河一派垂，古来唯有谪仙词。”高度评价了李白这首诗的艺术成就，认为只有李白这样的天才诗人才能写出如此绝妙的诗句。
        明·杨慎《升庵诗话》：“太白《望庐山瀑布》诗：‘银河落九天’，以银河比瀑布，可谓奇想。”称赞了李白在诗中运用的奇特想象。
        清·沈德潜《唐诗别裁》：“想落天外，局自变生，大江无风，波浪自涌，白云从空，随风变灭。此殆天授，非人力也。”高度赞扬了这首诗的艺术境界，认为其是天赋之作，非人力所能达到。
    `
},     
        '5': {
            id: '5',
            title: '登鹳雀楼',
            author: '唐·王之涣',
            content: '白日依山尽，黄河入海流。<br>欲穷千里目，更上一层楼。',
            tags: ['哲理', '唐诗', '五言绝句'],
            annotation: `
                ⑴鹳雀楼：旧址在山西永济市，前对中条山，下临黄河。传说常有鹳雀在此停留，故有此名。
                ⑵白日：太阳。依：依傍。尽：消失。 这句话是说太阳依傍山峦沉落。
                ⑶欲：想要得到某种东西或达到某种目的的愿望，但也有希望、想要的意思。穷：尽，使达到极点。千里目：眼界宽阔。
                ⑷更：再。
            `,
            appreciation: `
                这首诗是唐代诗人王之涣仅存的六首绝句之一。诗人通过描写登鹳雀楼远眺时所见到的壮丽山河景色，揭示了只有站得高才能看得远这一深刻哲理。
                “白日依山尽，黄河入海流”，短短十个字，便勾勒出一幅气势恢宏的山河落日图。诗人以极其洗练的笔触，描绘了夕阳西下、黄河奔腾入海的壮阔景象，让人感受到大自然的雄浑与伟大。
                “欲穷千里目，更上一层楼”，这两句诗是千古传诵的名句，富有哲理。它不仅表达了诗人对眼前美景的留恋和对更高境界的追求，更蕴含着只有不断努力、不断进取，才能获得更广阔视野和更丰富知识的深刻道理。这两句诗激励着人们要有远大的志向和不断进取的精神，成为了人们在学习和生活中常用的座右铭。
                整首诗意境雄浑，语言质朴，哲理深刻，具有很高的艺术价值。
            `,
            background: `
                该诗创作背景一般认为是诗人在登上鹳雀楼时，被眼前的壮丽景色所震撼，从而有感而发创作了此诗。鹳雀楼在古代是文人墨客登高望远、吟诗作画的胜地，王之涣登上高楼，俯瞰山河，心中涌起无限感慨，于是挥笔写下了这首流传千古的佳作。
            `,
            comments: `
                清·俞陛云《诗境浅说续编》：“数百年来，有此二十字，名楼益彰。”高度评价了这首诗的艺术成就，认为它让鹳雀楼更加声名远扬。
            `
        },
        '6': {
            id: '6',
            title: '水调歌头·明月几时有',
            author: '宋·苏轼',
            content: '明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间？转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。',
            tags: ['中秋', '宋词'],
            annotation: `
              ⑴水调歌头：词牌名，又名“元会曲”“凯歌”“台城游”等。双调九十五字，平韵。
              ⑵把酒：端起酒杯。把，执、持。
              ⑶天上宫阙（què）：指月中宫殿。阙，古代城墙后的石台。
              ⑷归去：回去，这里指回到月宫里去。
              ⑸琼（qióng）楼玉宇：美玉砌成的楼宇，指想象中的仙宫。
              ⑹不胜（shèng）寒：经受不住寒冷。胜：承担、承受。
              ⑺弄清影：意思是月光下的身影也跟着做出各种舞姿。弄：赏玩。
              ⑻何似：何如，哪里比得上。
              ⑼转朱阁，低绮（qǐ）户，照无眠：月儿移动，转过了朱红色的楼阁，低低地挂在雕花的窗户上，照着没有睡意的人（指诗人自己）。朱阁：朱红的华丽楼阁。绮户：雕饰华丽的门窗。
              ⑽不应有恨，何事长（cháng）向别时圆：（月儿）不该（对人们）有什么怨恨吧，为什么偏在人们分离时圆呢？何事：为什么。
              ⑾此事：指人的“欢”“合” 和月的“晴”“圆”。
              ⑿但愿：只希望。
              ⒀千里共婵（chán ）娟（juān）：只希望两人年年平安﹐虽然相隔千里，也能一起欣赏这美好的月光。共：一起欣赏。婵娟：指月亮。
            `,
            appreciation: `
              《水调歌头·明月几时有》是苏轼的代表作之一，也是中秋词中的绝唱。此词写于宋神宗熙宁九年（1076）中秋，当时作者在密州（今山东诸城）任知州。词以月起兴，围绕中秋明月展开想象和思考，把人世间的悲欢离合之情纳入对宇宙人生的哲理性追寻之中，反映了作者复杂而又矛盾的思想感情，又表现出作者热爱生活与积极向上的乐观精神。

              上阕词人因中秋而起“明月几时有”之问，通过对月的遐想，表达了对天上宫阙的向往，以及对人间生活的留恋。“我欲乘风归去，又恐琼楼玉宇，高处不胜寒”，既体现了词人对自由、美好的向往，又流露出对现实生活的担忧。下阕由中秋的圆月联想到人间的离别，抒发了对弟弟苏辙的思念之情。“人有悲欢离合，月有阴晴圆缺，此事古难全”，将自然现象与人生哲理相结合，表现出词人豁达的人生观。最后“但愿人长久，千里共婵娟”，则表达了词人对亲人、朋友的美好祝愿，成为千古名句。

              整首词意境豪放而阔大，情怀乐观而旷达，对明月的向往之情，对人间的眷恋之意，以及那浪漫的色彩，潇洒的风格和行云流水一般的语言，至今还能给人们以健康的美学享受。
            `,
            background: `
              这首词是宋神宗熙宁九年（公元1076年）中秋节作者在密州（今山东诸城）时所作。苏轼曾经要求调任到离苏辙较近的地方为官，熙宁七年（公元1074年）苏轼被调往密州任职。到密州后，这一愿望仍无法实现。熙宁九年的中秋，皓月当空，银辉遍地，词人与胞弟苏辙分别之后，已七年未得团聚。此刻，词人面对一轮明月，心潮起伏，于是乘酒兴正酣，挥笔写下了这首名篇。
            `,
            comments: `
              胡仔《苕溪渔隐丛话》说：“中秋词，自东坡《水调歌头》一出，余词尽废。”
              张炎《词源》说：“此词清空中有意趣，无笔力者未易到。”
              陈廷焯《白雨斋词话》说：“中秋词，前乎此者，太白《把酒问月》一篇而已。后乎此者，无有能继苏者。”
            `
        },
        '7': {
            id: '7',
            title: '天净沙·秋思',
            author: '元·马致远',
            content: '枯藤老树昏鸦，小桥流水人家，古道西风瘦马。<br>夕阳西下，断肠人在天涯。',
            tags: ['思乡', '元曲'],
            annotation: `
                ⑴天净沙：曲牌名，属越调。又名“塞上秋”。
                ⑵枯藤：枯萎的枝蔓。昏鸦：黄昏时归巢的乌鸦。昏：傍晚。
                ⑶人家：农家。此句写出了诗人对温馨的家庭的渴望。
                ⑷古道：已经废弃不堪再用的古老驿道（路）或年代久远的驿道。西风：寒冷、萧瑟的秋风。瘦马：瘦骨如柴的马。
                ⑸断肠人：形容伤心悲痛到极点的游子。天涯：远离家乡的地方。
            `,
            appreciation: `
                《天净沙·秋思》是元曲作家马致远创作的小令，是一首著名的散曲作品，被誉为“秋思之祖”。
                小令前三句“枯藤老树昏鸦，小桥流水人家，古道西风瘦马”，作者运用了一系列的名词，组成了一幅萧瑟、凄凉的秋日黄昏图。这些景物看似孤立，却又紧密相连，共同营造出一种孤寂、哀愁的氛围。“枯藤”“老树”“昏鸦”给人一种衰败、凄凉的感觉，而“小桥流水人家”则以温馨的画面反衬出游子的孤独和凄凉。“古道西风瘦马”则进一步强调了游子的漂泊和疲惫。
                “夕阳西下，断肠人在天涯”，点明了时间和主人公的处境。夕阳西下，一天即将过去，而游子却依然漂泊在天涯，有家不能归，这种思乡之情和孤独感达到了极致。“断肠人”三个字，生动地表现了游子内心的痛苦和绝望。
                整首小令通过对秋日黄昏景色的描写，抒发了游子漂泊天涯的孤寂愁苦之情，具有很强的艺术感染力。
            `,
            background: `
                马致远年轻时热衷功名，但由于元统治者实行民族高压政策，因而一直未能得志。他几乎一生都过着漂泊无定的生活，仕途坎坷。这首小令就是他在漂泊途中所作，通过描绘秋日黄昏的凄凉景色，抒发了自己的羁旅之愁和思乡之情。
            `,
            comments: `
                明·周德清《中原音韵·小令定格》：“此方是乐府，不入他声字，皆作平声，这是定格。”对这首小令的格律给予了肯定。
                清·王国维《人间词话》：“寥寥数语，深得唐人绝句妙境。有元一代词家，皆不能办此也。”高度评价了这首小令的艺术成就，认为它达到了唐人绝句的妙境。
            `
        },
        '8': {
            id: '8',
            title: '山坡羊·潼关怀古',
            author: '元·张养浩',
            content: '峰峦如聚，波涛如怒，山河表里潼关路。<br>望西都，意踌躇。<br>伤心秦汉经行处，宫阙万间都做了土。<br>兴，百姓苦；亡，百姓苦！',
            tags: ['爱国', '元曲'],
            annotation: `
                ⑴山坡羊：曲牌名，是这首散曲的格式；“潼关怀古”是标题。
                ⑵峰峦如聚：形容群峰攒集，层峦叠嶂。聚：聚拢；包围
                ⑶波涛如怒：形容黄河波涛的汹涌澎湃。怒：指波涛汹涌。
                ⑷山河表里：外面是山，里面是河，形容地势险要。具体指潼关外有黄河，内有华山。
                ⑸西都：指长安（今陕西西安）。这是泛指秦汉以来在长安附近所建的都城。秦、西汉建都长安，东汉建都洛阳，因此称洛阳为东都，长安为西都。
                ⑹踌躇：犹豫、徘徊不定，心事重重，此处形容思潮起伏，感慨万端陷入沉思，表示心里不平静。
                ⑺伤心：令人伤心的事， 形容词作动词。秦汉经行处：秦朝（前221年~前206年）都城咸阳和西汉（前208~8）的都城长安都在陕西省境内潼关的西面。经行处，经过的地方。指秦汉故都遗址。
                ⑻宫阙：宫殿。阙，皇宫门前两边供瞭望的楼。
                ⑼兴：指政权的统治稳固。亡：指政权的衰败覆灭。
            `,
            appreciation: `
                《山坡羊·潼关怀古》是张养浩晚年的代表作，也是元散曲中思想性、艺术性完美结合的名作。
                开头“峰峦如聚，波涛如怒，山河表里潼关路”，作者从视觉和听觉两个方面，描绘了潼关地势的险要。“聚”和“怒”两个字，将山峰和波涛拟人化，生动地表现了大自然的磅礴气势，也暗示了潼关在历史上的重要地位。
                “望西都，意踌躇。伤心秦汉经行处，宫阙万间都做了土”，作者遥望西都长安，思绪万千。曾经辉煌一时的秦汉宫殿，如今都已化为尘土，这不禁让人感到世事无常，历史的沧桑巨变。
                “兴，百姓苦；亡，百姓苦！”这是全曲的主旨句，也是最具感染力和震撼力的一句。它深刻地揭示了封建王朝兴衰给百姓带来的苦难，无论朝代是兴是亡，受苦的始终是广大的老百姓。这一观点具有深刻的思想内涵和强烈的批判精神，反映了作者对人民的同情和对封建统治的不满。
                整首散曲气势雄浑，情感深沉，具有很高的艺术价值和思想价值。
            `,
            background: `
                元文宗天历二年（1329年），因关中旱灾，张养浩被任命为陕西行台中丞以赈灾民。他命驾西秦过程中，亲睹人民的深重灾难，感慨叹喟，愤愤不平、遂散尽家财，尽心尽力去救灾，终因过分操劳而殉职。这首曲便是他赴陕西救灾途经潼关所作。
            `,
            comments: `
                清·陈廷焯《白雨斋词话》：“淋漓痛快，笔力千钧。”称赞了这首曲的艺术表现力。
            `
        },
        '9': {
          id: '9',
            title: '登金陵雨花台望大江',
            author: '明·高启',
            content: '大江来从万山中，山势尽与江流东。<br>钟山如龙独西上，欲破巨浪乘长风。<br>江山相雄不相让，形胜争夸天下壮。<br>秦皇空此瘗黄金，佳气葱葱至今王。<br>我怀郁塞何由开，酒酣走上城南台；<br>坐觉苍茫万古意，远自荒烟落日之中来！<br>石头城下涛声怒，武骑千群谁敢渡？<br>黄旗入洛竟何祥，铁锁横江未为固。<br>前三国，后六朝，草生宫阙何萧萧。<br>英雄乘时务割据，几度战血流寒潮。<br>我生幸逢圣人起南国，祸乱初平事休息。<br>从今四海永为家，不用长江限南北。',
            tags: ['爱国', '明诗'],
            annotation: `
                ⑴金陵：今江苏南京。雨花台：在南京市南聚宝山上。相传梁武帝时，云光法师在此讲经，落花如雨，故名。
                ⑵钟山：即紫金山，在今南京市东。
                ⑶秦皇：秦始皇。瘗（yì）黄金：埋下黄金。《丹阳记》：“秦始皇埋金玉杂宝以压天子气，故名金陵。”
                ⑷佳气：指产生帝王的一种气，这是一种迷信的说法。王：旺盛。
                ⑸城南台：即雨花台。
                ⑹石头城：故址在今南京市清凉山。
                ⑺黄旗入洛：三国时吴王孙皓听术士说自己有天子的气象，于是就率家人宫女西上入洛以顺天命。途中遇大雪，士兵怨怒，才不得不返回。后来吴国果然为晋所灭，孙皓全家被迫迁到洛阳。
                ⑻铁锁横江：三国时吴国为阻止晋兵进攻，曾在长江上设置铁锥铁锁，均被晋兵所破。
                ⑼前三国：指魏、蜀、吴。后六朝：指东晋、宋、齐、梁、陈。
                ⑽圣人：指朱元璋。起南国：朱元璋是濠州（今安徽凤阳）人，地属南方。
            `,
            appreciation: `
                《登金陵雨花台望大江》是高启的代表作之一，这首诗通过描写诗人登上金陵雨花台眺望大江的所见所感，抒发了对历史兴亡的感慨和对国家统一的赞美。
                诗的前八句描绘了金陵的山川形势，诗人以磅礴的气势描绘了长江的汹涌奔腾和钟山的雄伟壮丽，展现了金陵的形胜之美。“江山相雄不相让，形胜争夸天下壮”，生动地表现了金陵的山川气势和历史地位。
                中间八句，诗人回顾了金陵的历史变迁，从秦始皇埋金镇压天子气到三国六朝的兴亡，诗人感慨万千。“英雄乘时务割据，几度战血流寒潮”，揭示了历史上割据纷争给人民带来的灾难。
                最后四句，诗人笔锋一转，表达了对国家统一的赞美和对和平的向往。“我生幸逢圣人起南国，祸乱初平事休息。从今四海永为家，不用长江限南北”，体现了诗人对朱元璋统一全国的歌颂，以及对国家长治久安的期盼。
                整首诗意境开阔，气势恢宏，情感深沉，具有很高的艺术价值。
            `,
            background: `
                这首诗创作于明朝建立初期。高启生活在元末明初，目睹了战乱给人民带来的痛苦。明朝建立后，国家实现了统一，社会逐渐安定。诗人登上金陵雨花台，眺望大江，感慨历史的兴亡和国家的变迁，于是创作了这首诗。
            `,
            comments: `
                清·沈德潜《明诗别裁集》：“声调格律，一一入神。”对这首诗的艺术成就给予了高度评价。
            `
        },
        '10': {
          id: '10',
            title: '长相思·山一程',
            author: '清·纳兰性德',
            content: '山一程，水一程，身向榆关那畔行，夜深千帐灯。<br>风一更，雪一更，聒碎乡心梦不成，故园无此声。',
            tags: ['思乡', '清词'],
            annotation: `
                ⑴长相思：词牌名，又名“吴山青”“山渐青”“相思令”“长思仙”“越山青”等。双调三十六字，前后段各四句三平韵一叠韵。
                ⑵程：道路、路程，山一程、水一程，即山长水远。
                ⑶榆关：即今山海关，在今河北秦皇岛东北。那畔：即山海关的另一边，指身处关外。
                ⑷千帐灯：皇帝出巡临时住宿的行帐的灯火。千帐言军营之多。
                ⑸更：旧时一夜分五更，每更大约两小时。风一更、雪一更，即言整夜风雪交加。
                ⑹聒（guō）：声音嘈杂，这里指风雪声。
                ⑺故园：故乡，这里指北京。此声：指风雪交加的声音。
            `,
            appreciation: `
                《长相思·山一程》是清代词人纳兰性德于康熙二十一年（1682年）创作的一首词。词人随从康熙帝诣永陵、福陵、昭陵告祭，出关时写下了这首词。
                上片“山一程，水一程，身向榆关那畔行，夜深千帐灯”，描写了词人一路上翻山越岭、跋山涉水，向榆关进发的情景。“山一程，水一程”，重复使用“一程”，强调了行程的遥远和艰辛。“夜深千帐灯”，描绘了夜晚宿营时，众多营帐灯火通明的壮观景象，既表现了军队的庞大和气势，也暗示了词人内心的孤独和思乡之情。
                下片“风一更，雪一更，聒碎乡心梦不成，故园无此声”，描写了夜晚风雪交加的情景，风雪声嘈杂，搅碎了词人的思乡梦。“故园无此声”，将塞外的风雪声与故乡的宁静形成鲜明对比，更加突出了词人的思乡之情。
                整首词语言质朴，情感真挚，通过描写旅途的艰辛和塞外的风雪，抒发了词人对故乡的思念之情。
            `,
            background: `
                康熙二十一年（1682）二月十五日，康熙帝因云南平定，出关东巡，祭告奉天祖陵。词人随从康熙帝诣永陵、福陵、昭陵告祭，二十三日出山海关。塞上风雪凄迷，苦寒的天气引发了词人对京师中家的思念，于是写下了这首词。
            `,
            comments: `
                近代·俞陛云《唐五代两两宋词选释》：“容若承文端之余荫，拥高资，席丰履厚，词中却时时流露出哀感顽艳、寂寞无聊的情绪，殆富贵而不欢者。此阕写塞外寒宵之苦，其意态与‘夜深千帐灯’句，神似王摩诘之‘大漠孤烟直，长河落日圆’也。”对这首词的艺术特色和情感内涵进行了深入分析。
            `
        }
    };

      const poem = poems[poemId];

    // 根据诗词标题加载诗词详情
     if (poem) {
    // 渲染诗词标题和作者
    document.querySelector('.poem-title').innerText = poem.title;
    document.querySelector('.poem-meta').innerText = poem.author;
    document.querySelector('.poem-content').innerHTML = poem.content.replace(/\n/g, '<br>');

    // 渲染诗词注释
    document.querySelector('#tab-content-1').innerHTML = `
      <h3 class="text-xl font-bold text-primary mb-4">诗词注释</h3>
      <p class="text-gray-700 mb-4">${poem.annotation.replace(/\n/g, '<br>')}</p>
    `;

    // 渲染诗词赏析
    document.querySelector('#tab-content-2').innerHTML = `
      <h3 class="text-xl font-bold text-primary mb-4">诗词赏析</h3>
      <p class="text-gray-700 mb-4">${poem.appreciation.replace(/\n/g, '<br>')}</p>
    `;

    // 渲染创作背景
    document.querySelector('#tab-content-3').innerHTML = `
      <h3 class="text-xl font-bold text-primary mb-4">创作背景</h3>
      <p class="text-gray-700 mb-4">${poem.background.replace(/\n/g, '<br>')}</p>
    `;

    // 渲染名家点评
    //   <p class="text-gray-700 mb-4">${poem.comments}</p>
    document.querySelector('#tab-content-4').innerHTML = `
      <h3 class="text-xl font-bold text-primary mb-4">名家点评</h3>
      <p class="text-gray-700 mb-4">${poem.comments.replace(/\n/g, '<br>')}</p>
    `;
  } else {
    // 如果没有找到对应的诗词，可以显示一个默认或错误页面
    document.querySelector('.poem-title').innerText = '诗词未找到';
    document.querySelector('.poem-meta').innerText = '';
    document.querySelector('.poem-content').innerText = '请检查URL参数是否正确。';
  }
</script>
<script>
  // 收藏功能
  document.getElementById('favorite-btn').addEventListener('click', function() {
    const poemId = new URLSearchParams(window.location.search).get('id');
    const poem = poems[poemId];
    
    if (!poem) return;
    
    // 获取现有收藏
    let favorites = JSON.parse(localStorage.getItem('favorites')) || [];
    
    // 检查是否已收藏
    const isAlreadyFavorite = favorites.some(f => f.id === poemId);
    
    if (isAlreadyFavorite) {
      // 如果已收藏，则移除
      favorites = favorites.filter(f => f.id !== poemId);
      localStorage.setItem('favorites', JSON.stringify(favorites));
      
      // 更新按钮状态
      this.innerHTML = '<i class="fa fa-bookmark-o mr-2"></i>收藏';
      this.classList.add('btn-primary');
      this.classList.remove('btn-success');
      
      alert('已从收藏中移除');
    } else {
      // 添加到收藏
      favorites.push({
        id: poem.id,
        title: poem.title,
        author: poem.author,
        content: poem.content.split('<br>')[0] + '...', // 显示第一行
        date: new Date().toISOString().split('T')[0] // 当前日期
      });
      
      // 保存到本地存储
      localStorage.setItem('favorites', JSON.stringify(favorites));
      
      // 更新按钮状态
      this.innerHTML = '<i class="fa fa-bookmark mr-2"></i>已收藏';
      this.classList.add('btn-success');
      this.classList.remove('btn-primary');
      
      alert('已添加到收藏');
    }
  });
  
  // 页面加载时检查是否已收藏
  document.addEventListener('DOMContentLoaded', function() {
    const poemId = new URLSearchParams(window.location.search).get('id');
    const poem = poems[poemId];
    const favoriteBtn = document.getElementById('favorite-btn');
    
    if (!poem || !favoriteBtn) return;
    
    const favorites = JSON.parse(localStorage.getItem('favorites')) || [];
    const isFavorite = favorites.some(f => f.id === poemId);
    
    if (isFavorite) {
      favoriteBtn.innerHTML = '<i class="fa fa-bookmark mr-2"></i>已收藏';
      favoriteBtn.classList.add('btn-success');
      favoriteBtn.classList.remove('btn-primary');
    }
  });
</script>
</body>
</html>    